<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/jquery-1.4.1.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script type="text/javascript" src="../js/ky.js"></script>

		<style type="text/css">
			#title{
				/* margin-left: 200px; */
				margin-right: 250px;
				
			}
			#main {
				font-family: 微软雅黑;
				font-size: 15px;
				text-align: center;
				height: 40px;
				width: 400px;
				vertical-align: middle;
				line-height: 40px;
				/* border: 1px solid red; */
				margin: 100px auto;
			}

			.float-left {
				float: left;
			}
			.anniu {
				float: left;
				margin-top: 25px;
				margin-left: 15px;
			}

			.roleData {
				margin-left: -75px;
			}

			.check {
				margin-right: 30px;
			}
			#tianjia{
				margin-right: 350px;
			}
		</style>
	</head>
	<body>
		<div id=main>
			<div id="title">
				角色列表
			</div>
			<div>
				<div class="float-left">id</div>
				<div class="float-left">角色</div>
				<div>用户使用数量</div>
			</div>
			
			<div v-for="role in roleList" class="roleData">
				<div class="float-left check"><input type="checkbox" v-bind:id="role.id" :value="role.id"
						v-model="cData" />
				</div>
				<div class="float-left">{{role.id}}</div>
				<div class="float-left">{{role.name}}</div>
				<div>{{role.userCount}}</div>
			</div>
			<div >
				<input type="text" id="tianjia" v-model="username"/>
			</div>
			<div>
				<div>
					<input class="anniu" type="button" id="add" v-on:click="add" value="增加" />
					<input class="anniu" type="button" id="update" value="修改" />
					<input class="anniu" type="button" id="delete" v-on:click="deleterole" value="删除"/>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var vue = new Vue({
				el: '#main',
				data: {
					roleList: [],
					cData: [],
					username:''
					
				},
				methods: {
					getRole() {
						axios.get('http://localhost:8080/attendance-service/wwx/get?method=select').then(
							function(backdatas) {
								var roledata = backdatas.data;
								if(roledata.code==200){
									vue.roleList = roledata.data;
								}else{
									window.location.href="404.html";
								}
							})
					},
					
					add(){
						var rs=this.username
						var datas={
							'name':rs,
							'method':'add'
						}
						var url='http://localhost:8080/attendance-service/wwx/post'
						axios.post(url,datas).then(function(backdatas){
							location.reload();
						})
					},
					
					deleterole(){
						var ids=vue.cData
						var datas={
							'ids':ids,
							method:'delete'
						}
						var url='http://localhost:8080/attendance-service/wwx/post'
						axios.post(url,datas).then(function(backdatas){
							var flag=backdatas.data.code==200;
							console.log(flag);
							if(flag){
							location.reload();
							}else{ 
								var arry=backdatas.data;
								var s='';
								for (i = 0; i < arry.length; i++) {
								  var roleid=arry[i];
								  console.log(roleid);
								  s=s+roleid+'   ';
								}
								console.log(s+'无法删除');
							}
						})
					}
				},
			});
			vue.getRole();
		}
	</script>

</html>
